previewLabApplication

fun previewLabApplication(previewList: List<PreviewLabPreview>, featuredFileList: Map<String, List<String>> = emptyMap(), openFileHandler: OpenFileHandler<out Any?>? = null, state: PreviewLabGalleryState = PreviewLabGalleryState(), rootElement: HTMLElement = document.body!!)

Launches a web application for previewing Compose components

Creates a browser-based interface for interactive component development and testing. Utilizes Compose for Web to render the PreviewLab interface in a web viewport. Supports file opening handlers and featured file organization for web-based development workflows.

// Basic web application
fun main() = previewLabApplication(
previewList = myModule.PreviewList
)

// With file handler and grouping
fun main() = previewLabApplication(
previewList = myModule.PreviewList,
openFileHandler = UrlOpenFileHandler("https://github.com/user/repo/blob/main"),
)

// With `.composepreviewlab/featured/` directory
fun main() = previewLabApplication(
previewList = myModule.PreviewList,
featuredFileList = app.FeaturedFileList,
)

// Custom root element
fun main() {
val customContainer = document.getElementById("preview-container") as HTMLElement
previewLabApplication(
previewList = myModule.PreviewList,
rootElement = customContainer
)
}

Parameters

previewList

Collection of previews to display in the interface

featuredFileList

Grouped file organization for navigation

openFileHandler

Handler for opening source files (optional)

state

PreviewLabGalleryState for managing gallery state

rootElement

HTML element to mount the application (defaults to document.body)

See also